<template>
    <div class="app-container" v-cloak>
        <div>
            <img src="../../../assets/icons/sy_fhbtn.png" class="fh_img" @click="$router.back()">
            <div style=" display: inline-block; ">
                <!-- <div class="wz_cl">اندازه فیری ایپتفاه اپاپی اطلاعات</div> -->
                <div >{{czinfo.stName}}( {{czinfo.stCode}})</div>
            </div>
        </div>
        
        <el-tabs style="min-width: 700px;" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="实时监测信息" name="ssjc">
                <ssjc :czid="$route.query.stcode" :ymtype="1" ></ssjc>
            </el-tab-pane>
            <el-tab-pane label="日统计过程信息" name="ri">
                <rtj :czid="$route.query.stcode"></rtj>
            </el-tab-pane>
            <el-tab-pane label="月统计过程信息" name="yue">
                <ytj :czid="$route.query.stcode"></ytj>
            </el-tab-pane>
            <el-tab-pane label="年统计过程信息" name="nian">
                <ntj :czid="$route.query.stcode"></ntj>
            </el-tab-pane>
        </el-tabs>
            
    </div>
</template>

<script>
    import { getcname } from "@/api/measurement/watermonitor"
    import ssjc from "./components/qdsq_ssjc.vue"
    import rtj from "./components/qdsq_rtj.vue"
    import ytj from "./components/qdsq_ytj.vue"
    import ntj from "./components/qdsq_ntj.vue"

    export default {
        name: "subqdsq",
        components: { ssjc, rtj, ytj, ntj },
        dicts: ["st_moniItem", "rise_patt", "st_eqtype","sys_chan_level"],
        data() {
            return {
                //测站统计
                czinfo: {
                    stCode: undefined,
                    stName: undefined,
                },
                stcode: undefined,
                activeName: 'ssjc'
            };
        },
        created() {
            this.loadname();
        },
        mounted() {
            const pa = this.$route.query.stcode;
            this.czinfo.stCode = pa;

        },
        methods: {

            loadname(){
                getcname({statCd:this.$route.query.stcode}).then(response => {
                    this.czinfo.stName = response?response:'';
                });
            },
            handleClick(tab, event){
            }

        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">

    .el-carousel__item {
        background-color: #99a9bf;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .c_jbxx {
        margin-top: 5px;
        padding: 10px 0px;
        font-size: 14px;

        .cj_it {
            margin-top: 10px;

            .fyh_mc {
                color: #242829;
            }

            .zw_mc {
                color: #242829;
                span {
                    margin-left: 20px;
                }
            }
        }

    }

    .dm_c {
        margin-top: 5px;
        min-height: 180px;
        background: #ffffff;
        position: relative;
        .dc_title {
            padding: 15px;
            font-size: 14px;

            span {
                color: #1890ff;
            }
        }

        .dc_dmxs {
            padding: 15px;
            font-size: 14px;
            position: absolute;
            right: 20px;
            top: 0px;
            span {
                color: #1890ff;
            }
        }

        .dc_row {
            text-align: left;
            min-height: 100px;
            overflow: hidden;
            .dr_it {
                width: 80%;
                margin: 0 auto;
            }

            .mtd{
                margin-top: 20px;
            }

            .dr_t {
                font-size: 18px;
                font-weight: 700;
                margin-top: 8px;
            }

            .dr_w {
                font-size: 14px;
                margin-top: 8px;
                line-height: 18px;
                color: #A6A6A6;
            }
        }
    }


    .wz_cl {
        color: #1890ff;
    }

    .czxq_c {
        padding: 20px;
        background: #f7fbfe;
        margin-right: 30px;
    }

    .fh_img {
        margin: 5px 10px 0px 0;
        cursor: pointer;
    }

    [v-cloak] {
        display: none;
    }

</style>
